<template>
	<view class="box">
		<view class="userbox flex" @click="gomyinfo">
			<view class="navicon">
				<image v-if="avatar" :src="avatar"></image>
				<image v-else :src="mediaUrl+ '/media/avatar/asd.png'"></image>
			</view>
			<view class="userinfobox">
				<view class="unamebox flex flex-justify-start">
					<view class="name">{{ userInfo.nickname || '未知' }}</view>
					<!-- <view v-if="checker">审核员</view> -->
					<!-- <view v-if="administrator">管理员</view> -->
				</view>
				<!-- <view>ID: {{ userId}}</view> -->
				<!--				<view class="userinfobox2">-->
				<!--					<view class="level flex">-->
				<!--						&lt;!&ndash; <image class="icon-level" src="@/static/images/icon-level.png" mode=""></image> &ndash;&gt;-->
				<!--						<text class="em">Lv</text>-->
				<!--						<text>{{level}}</text>-->
				<!--					</view>-->

				<!--					<view class="progress-box">-->
				<!--						<progress :percent="percent" backgroundColor="#f2eccc" activeColor="#F0CF10"-->
				<!--							border-radius="10" />-->
				<!--					</view>-->
				<!--					<view class="des" style="margin-left: 10rpx;margin-right: 10rpx;">金币:{{coins}}</view>-->

				<!--					<view @click.stop="helpClick">-->
				<!--						<uni-icons type="help-filled" color="#EABA5B" size="20"></uni-icons>-->
				<!--					</view>-->
				<!--				</view>-->
			</view>

			<view class="contributebox flex space-between" @click="integralClick">
				<view class="flex">
					<image mode="widthFix" src="/static/images/home/icon_crown.png"></image>
				</view>
				<text>金币：{{coins}}</text>
			</view>
		</view>

		<view class="tradesbox">
			<view class="title">我的交易</view>
			<view class="tradesitems flex space-evenly">
				<view class="item" @click="postclick">
					<image mode="widthFix" src="/static/images/home/icon_publish.png"></image>
					<text>我的发布</text>
				</view>
				<view class="item" @click="buyclick">
					<image mode="widthFix" src="/static/images/home/icon_buy.png"></image>
					<text>我的购买</text>
				</view>
				<view class="item" @click="collectClick">
					<image mode="widthFix" src="/static/images/home/icon_collect.png"></image>
					<text>我的收藏</text>
				</view>
			</view>
		</view>

		<!-- 卡片 start -->
		<view class="section">

			<!-- <view class="itembox" @click="gomygoods">
				<view class="left">
					<u-icon name="grid-fill" color="#e07472" size="24"></u-icon>
					<text>我的发布</text>
				</view>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view> -->

			<!--			<view class="itembox" @click="gojyxq">-->
			<!--				<view class="left">-->
			<!--					<u-icon name="file-text-fill" color="#e07472" size="24"></u-icon>-->
			<!--					<text>交易详情</text>-->
			<!--				</view>-->
			<!--				<uni-icons type="arrowright" color="#c1c1c1" size="16"></uni-icons>-->
			<!--			</view>-->
			<!--			<view class="itembox" @click="goyue">-->
			<!--				<view class="left">-->
			<!--					<u-icon name="file-text-fill" color="#e07472" size="24"></u-icon>-->
			<!--					<text>账户余额</text>-->
			<!--				</view>-->
			<!--				<uni-icons type="arrowright" color="#c1c1c1" size="16"></uni-icons>-->
			<!--			</view>-->


			<!--弹窗登录-->
			<!-- <u-popup :show="showCheckBox" mode="center" @close="closeCheckBox" @open="openCheckBox"
				:safeAreaInsetBottom="true"
				:safeAreaInsetTop="true"
				:overlay='true'
				:closeable="true"
				:bgColor="`#ffffff`"
				:round="'10px'"
				:closeOnClickOverlay="false"
				>
				<view class="upopupbox">
					<text class="titlebox">审核员</text>
					<view class="tipsbox">
						审核条件：该账号被举报次数不可超过三次，并且历史发布的消息和商品里不可以包含违法脏字。
					</view>
					<view class="tipsbox">
						审核规则：任何人发布的商品状态变为待审核，不在首页展示，展示在审核员的审核列表里，点
						开详情后，审核员可以点击下方的通过和下架，通过则将状态自动变为已上架，拒绝则变为已下
						架，并弹框说明原因，对方的消息栏会受到一条消息，审核一位增加0.1。一公里范围内的审
						核员个数为用户的十分之一，比如用户十个，审核员为一个，超过后再有人申请则提示名额已满。
					</view>
					<view class="contactbox">
						<button open-type="contact" >
							<view class="content">
								<u-icon name="server-man" color="#2979ff" size="30"></u-icon>
								<text class="textbox">联系客服</text>
							</view>
						</button>
					</view>

				</view>
			</u-popup>
			<view class="itembox" @click="becomeadminClick">
				<view class="left">
					<u-icon name="account-fill" color="#e07472" size="24"></u-icon>
					<text>管理员</text>
				</view>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
			弹窗登录-->
			<!-- <u-popup :show="showAdminBox" mode="center" @close="closeAdminBox" @open="openAdminBox" -->
			<!--:safeAre aInsetBottom="true"
				:safeAreaInsetTop="true"
				:overlay='true'
				:closeable="true"
				:bgColor="`#ffffff`"
				:round="'10px'"
				:closeOnClickOverlay="false"
				>
				<view class="upopupbox">
					<text class="titlebox">管理员</text>
					<view class="tipsbox">
						对用户举报、反映信息进行处理，平台会给与丰厚奖励
					</view>

					<view class="contactbox">
						<button open-type="contact" >
							<view class="content">
								<u-icon name="server-man" color="#2979ff" size="30"></u-icon>
								<text class="textbox">联系客服</text>
							</view>
						</button>
					</view>

				</view>
			</u-popup>
			 -->
			<view class="itembox">
				<button open-type="contact" class="left">
					<u-icon name="server-man" color="#5B7DC2" size="24"></u-icon>
					<text>客服介入</text>
				</button>
				<uni-icons type="arrowright" color="#5B7DC2" size="16"></uni-icons>
			</view>
			<view class="itembox" @click="contactClick">
				<view class="left">
					<u-icon name="phone" color="#5B7DC2" size="24"></u-icon>
					<text>联系我们</text>
				</view>
				<uni-icons type="arrowright" color="#5B7DC2" size="16"></uni-icons>
			</view>
			<view class="itembox" @click="helpcenterClick">
				<view class="left">
					<u-icon name="question-circle" color="#5B7DC2" size="24"></u-icon>
					<text>帮助中心</text>
				</view>
				<uni-icons type="arrowright" color="#5B7DC2" size="16"></uni-icons>
			</view>
			<!-- <view class="itembox" @click="suggestClick">
				<view class="left">
					<u-icon name="warning" color="#5B7DC2" size="24"></u-icon>
					<text>投诉建议</text>
				</view>
				<uni-icons type="arrowright" color="#5B7DC2" size="16"></uni-icons>
			</view> -->
			<view class="itembox" @click="reviewClick('reportReview')" v-if="checker">
				<view class="left">
					<u-icon name="warning" color="#5B7DC2" size="24"></u-icon>
					<text>商品举报</text>
				</view>
				<uni-icons type="arrowright" color="#5B7DC2" size="16"></uni-icons>
			</view>
			<view class="itembox" @click="reviewClick('complaintReview')" v-if="checker">
				<view class="left">
					<u-icon name="warning" color="#5B7DC2" size="24"></u-icon>
					<text>聊天举报</text>
				</view>
				<uni-icons type="arrowright" color="#5B7DC2" size="16"></uni-icons>
			</view>
			<view v-if="!hasLogin" class="btn-box w100 fixed">
				<button class="btn btn-save" @click="gologin">登 录</button>
			</view>
			<view v-if="hasLogin" class="btn-box w100 fixed">
				<button class="btn btn-save" @click="goquit">退 出</button>
			</view>
		</view>
		<!-- 卡片 end -->
		<!-- 悬浮发布按钮 -->
		<!--		<view>-->
		<!--			<movable-area class="movableArea">-->

		<!--				<movable-view class="movableView2" direction="all" x="630rpx" y="720rpx">-->
		<!--					<button open-type="contact">-->
		<!--						<view class="content">-->
		<!--							<u-icon name="server-man" color="#2979ff" size="30"></u-icon>-->
		<!--							<text class="textbox">客服</text>-->
		<!--						</view>-->
		<!--					</button>-->
		<!--				</movable-view>-->
		<!--				&lt;!&ndash; <movable-view class="movableView3" direction="all" x="630rpx" y="1040rpx">-->
		<!--					<button @click="shareclick">-->
		<!--						<view class="content">-->
		<!--							<u-icon name="share-square" color="#2979ff" size="25"></u-icon>-->
		<!--							<text class="textbox">分享</text>-->
		<!--						</view>-->
		<!--					 </button>-->
		<!--				 </movable-view> &ndash;&gt;-->
		<!--			</movable-area>-->
		<!--		</view>-->
		<MyLogin v-if="showlogin" :showlogin.sync="showlogin"></MyLogin>
	</view>

</template>

<script>
	var self;
	import MyLogin from '@/components/my-login.vue'
	export default {
		components: {
			MyLogin
		},
		data() {
			return {
				avatar: null,

				mediaUrl: uni.$http.mediaUrl,
				hasLogin: false,

				userInfo: null,
				userId: null,
				coins: 0,
				level: '0',
				percent: 0,
				// userInfo: uni.getStorageSync('userInfo') || null,
				showlogin: false,

				checker: false,
				showCheckBox: false,
				// administrator: false,
				showAdminBox: false,
			};
		},

		onShow() {
			// self = this

			this.hasLogin = uni.getStorageSync('hasLogin')
			this.userInfo = uni.getStorageSync('userInfo')
			console.log(this.userInfo)
			this.getMyInfo()

			// if(uni.getStorageSync('userInfo')){
			// 	this.avatar = this.userInfo.avatar
			// }
		},
		methods: {
			helpClick() {
				uni.showToast({
					icon: 'none',
					title: '每十个金币为一级'
				})
			},
			getLevel(coins) {
				if (coins >= 0 && coins <= 10) {
					this.level = '0'
					this.percent = coins * 10
				} else if (coins > 10 && coins <= 20) {
					this.level = '1'
					this.percent = (coins - 10) * 10
				} else if (coins > 20 && coins <= 30) {
					this.level = '2'
					this.percent = (coins - 20) * 10
				} else if (coins > 30 && coins <= 40) {
					this.level = '3'
					this.percent = (coins - 30) * 10
				} else if (coins > 40 && coins <= 50) {
					this.level = '4'
					this.percent = (coins - 40) * 10
				} else if (coins > 50 && coins <= 60) {
					this.level = '5'
					this.percent = (coins - 50) * 10
				} else if (coins > 60 && coins <= 70) {
					this.level = '6'
					this.percent = (coins - 60) * 10
				} else if (coins > 70 && coins <= 80) {
					this.level = '7'
					this.percent = (coins - 70) * 10
				} else if (coins > 80 && coins <= 90) {
					this.level = '8'
					this.percent = (coins - 80) * 10
				} else if (coins > 90 && coins <= 100) {
					this.level = '9'
					this.percent = (coins - 90) * 10
				} else if (coins > 100) {
					this.level = '10'
					this.percent = 100
				}
			},
			async getMyInfo() {
				// console.log('getMyInfo'+this.userid)
				if (this.userInfo) {
					const userInfo = {
						username: this.userInfo.username,
					}
					const {
						data: res
					} = await uni.$http.post('getMyInfo/', userInfo)

					if (res.code == 200) {
						// console.log(res.data.userInfo)
						this.avatar = res.data.avatar
						this.coins = res.data.coins
						this.checker = res.data.checker
						// this.administrator = res.data.administrator
						this.userId = res.data.vueId

						// uni.setStorageSync('userid', this.userId)


						this.getLevel(parseInt(this.coins))
					} else {
						// uni.showToast({ icon:'error', title: res.msg })
					}
				}

			},
			gomygoods() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/mygoods'
					})
				}
			},
			gomyinfo() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/myinfo'
					})
				}
			},
			gojyxq() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/dealinfo'
					})
				}
			},
			goyue() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/yue'
					})
				}
			},

			becomeckeckClick() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					if (this.checker == false) {
						this.showCheckBox = true
					} else {
						uni.navigateTo({
							url: '/pages/mine/check'
						})
					}
				}
			},
			openCheckBox() {},
			closeCheckBox() {
				this.showCheckBox = false
			},

			// becomeadminClick() {
			// 	if (this.hasLogin == false) {
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title: '您还没登录，请先登录',
			// 			duration: 1000
			// 		})
			// 		setTimeout(() => {
			// 			this.showlogin = true
			// 		}, 1000);
			// 	} else {
			// 		if (this.administrator == false) {
			// 			this.showAdminBox = true
			// 		} else {
			// 			uni.navigateTo({
			// 				url: '/pages/mine/admin'
			// 			})
			// 		}
			// 	}
			// },
			openAdminBox() {},
			closeAdminBox() {
				this.showAdminBox = false
			},

			contactClick() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/contact'
					})
				}
			},
			softwarexyClick() {
				uni.navigateTo({
					url: '/pages/mine/softwarexy'
				})
			},
			helpcenterClick() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/helpcenter'
					})
				}
			},
			suggestClick() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/complainSuggest'
					})
				}
			},
			goquit() {
				uni.showModal({
					title: '提示',
					content: '确定退出吗？',
					success: function(res) {
						if (res.confirm) {
							uni.setStorageSync('hasLogin', false)
							uni.showToast({
								icon: 'none',
								title: '退出成功',
								duration: 1000
							})
							uni.setStorageSync('userInfo', null)
							uni.removeStorageSync('openid');
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/mine/mine'
								})
							}, 1000);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			gologin() {
				this.showlogin = true
			},
			setClick() {
				// uni.navigateTo({
				// 	url: '/pages/mine/myinfo'
				// })
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/myinfo'
					})
				}
			},

			complainClick() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/complain'
					})
				}
			},
			buyclick() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/mypurchase'
					})
				}
			},
			postclick() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/myposts'
					})
				}
			},
			collectClick() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/mycollect'
					})
				}
			},
			integralClick() {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/integralDetail'
					})
				}
			},
			reviewClick(val) {
				if (this.hasLogin == false) {
					uni.showToast({
						icon: 'none',
						title: '您还没登录，请先登录',
						duration: 1000
					})
					setTimeout(() => {
						this.showlogin = true
					}, 1000);
				} else {
					uni.navigateTo({
						url: '/pages/mine/' + val
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	.box {}

	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素

		.movableView2 {
			pointer-events: auto; //可以点击
			width: 48px;
			height: 48px;

			button {
				background: #ffffff;
				width: 100%;
				height: 100%;
				border-radius: 24px;
				box-shadow: 0upx 0upx 20upx rgba(250, 67, 106, 0.3);

				.content {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.u-icon {
						margin-top: 6px;
					}

					.textbox {
						font-size: 10px;
						margin-top: -8px;
					}
				}

			}
		}
	}

	.testbox {
		padding: 10px;
		display: flex;

		.msgbox {
			width: 200px;
			background-color: #e79233;
		}
	}

	.upopupbox {
		width: 700rpx;
		padding-bottom: 60rpx;
		margin-top: -8px;

		.titlebox {
			font-size: 18px;
			display: flex;
			justify-content: center;
		}

		.tipsbox {
			background-color: #fafafa;
			color: #545454;
			width: 80%;
			margin-left: 10%;
			padding: 6px;
			font-size: 14px;
		}

		.contactbox {
			width: 100%;
			height: 80px;
			margin-top: 20px;

			button {
				background: #ffffff;
				width: 70px;

				.content {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.u-icon {
						margin-top: 6px;
					}

					.textbox {
						font-size: 10px;
						margin-top: -8px;
					}
				}

			}
		}
	}

	.userbox {
		display: flex;
		padding: 30rpx 20rpx;
		padding-bottom: 50rpx;
		box-sizing: border-box;
		color: #fff;
		background-color: #6C64D0;

		.navicon {
			background-color: #D6D4FC;
			border: 4rpx solid #fff;
			border-radius: 100%;
			width: 100rpx;
			height: 100rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.userinfobox {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-evenly;
			margin-left: 15px;
			color: #D6D3F9;
			font-size: 12px;

			.unamebox {
				display: flex;

				.name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.des {
					font-size: 28rpx;
				}

				:nth-child(1) {
					margin-right: 4px;
				}

				:nth-child(2) {
					margin-right: 10px;
				}
			}

			.userinfobox2 {
				display: flex;
				align-items: center;

				.level {
					position: relative;
					background: -webkit-linear-gradIEnt(top, #f2eccc, #FFD201);
					border-radius: 8rpx;
					color: #A18B0B;
					padding: 0 20rpx;
					line-height: normal;

					.em {
						font-style: italic;
						padding-right: 8rpx;
					}

					text {
						font-weight: bold;
					}
				}

				.icon-level {
					width: 48rpx;
					height: 48rpx;
				}

				.progress-box {
					width: 100px;
					margin: 0 10px;
				}
			}

		}

		.contributebox {
			padding: 10rpx 30rpx 10rpx 10rpx;
			border-radius: 30rpx;
			background: #9E98E0;
			color: #2F278F;

			>view {
				width: 46rpx;
				height: 46rpx;
				background-color: white;
				border-radius: 50%;
				margin-right: 30rpx;

				image {
					width: 35rpx;
				}
			}

		}
	}

	.tradesbox {
		padding: 20rpx 36rpx;
		border-radius: 34rpx 34rpx 0px 0;
		background: #fff;
		position: relative;
		top: -30rpx;

		.title {
			color: #5B7DC2;
			font-size: 32rpx;
			font-weight: 600;
		}

		.tradesitems {
			background-color: #F7F7FF;
			justify-content: space-evenly;
			padding: 42rpx 0;
			margin-top: 20rpx;
			border-radius: 20rpx;

			>view {
				image {
					width: 80rpx;
					height: 80rpx;
					transform: translateX(10rpx);
				}

				text {
					color: #5B7DC2;
					display: block;
					text-align: center;
					font-size: 24rpx;
				}
			}
		}
	}

	page {}

	.section {
		background-color: #fff;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		width: 95%;
		margin: 0 auto;
		position: relative;
		top: -30rpx;
		// margin-top: -70rpx;
		padding: 10rpx 16rpx;
		box-sizing: border-box;
	}

	.itembox {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		padding: 30rpx 0px;
		border-bottom: 1rpx solid #EFEFEF;

		.left {
			display: flex;
			justify-content: start;
			align-items: center;
			padding: 0;
			background-color: transparent;
			height: auto;
			line-height: normal;
			border: none;
			width: 100%;
			font-size: inherit;

			&:before,
			&:after {
				border: none;
			}

			text {
				margin-left: 10px;
				color: #5B7DC2;
			}
		}
	}

	.btnlogin,
	.btnquit {
		//position: fixed;
		//bottom: 30px;
		//left: 5%;
		//width: 90%;


	}

	.btn-box {
		// margin: 50rpx 35rpx;
		// padding: 20rpx 40rpx;
		margin-bottom: 0px;
		box-sizing: border-box;
	}
</style>